<template lang="pug">
.listcard(:class='{"mobile":isMobile}')
  nuxt-link(:to='"/article/" + item.id', tag="div").img
    img(:src='qnUrl + item.img + "-256.144"', v-if="item.img")
  .r_info
    nuxt-link(:to='"/article/" + item.id', tag="div").h1 {{item.title || '标题都没写？'}}
    nuxt-link(:to='"/article/" + item.id', tag="div").desc {{item.synopsis || '哎呀呀～忘记写简介了。。。'}}
    .bottom
      svg.icon(aria-hidden="true")
        use(xlink:href="#icon-time-circle")
      span {{item.creat_time | formatTime('yyyy-MM-dd HH:mm')}}

      svg.icon(aria-hidden="true")
        use(xlink:href="#icon-heart")
      span {{item.praised || 0}}

      svg.icon(aria-hidden="true")
        use(xlink:href="#icon-eye")
      span {{item.watch || 0}}

      // svg.icon(aria-hidden="true")
      //   use(xlink:href="#icon-location")
      // span 苏州

      svg.icon(aria-hidden="true")
        use(xlink:href="#icon-attachment")
      span 感悟
</template>

<script>
export default {
  props: {
    item: {
      default () {
        return {}
      }
    }
  },
  computed: {
    isMobile () {
      return this.$store.state.view.isMobile
    },
    qnUrl () {
      return process.env.QN_URL
    }
  }
}
</script>

<style lang="stylus" scoped>
.listcard
  width 100%
  height 1.68rem
  background $White
  margin-bottom .12rem
  padding .12rem
  border-radius .05rem
  transition all .4s ease
  box-sizing border-box
  display flex
  flex-flow row nowrap
  align-items center
  justify-content flex-start
  &:hover
    // background darken($White, 10%)
    box-shadow 0 0 0.07rem rgba(0,0,0,0.1)
    .img
      img
        transform-origin 50% 50%
        transform scale(1.03, 1.03)
    .r_info
      .h1
        color $Black
        left .02rem
      .desc
        color $lBlack
      .bottom
        span
          color $lBlack
  &.mobile
    height auto
    flex-flow column nowrap
    .img
      flex 0 0 1.8rem
      width 3.36rem
      height 1.89rem
    .r_info
      margin-left 0
      padding-top .15rem
      width 3.36rem
      .bottom
        margin-top .12rem
  .img
    flex 0 0 2.56rem
    width 2.56rem
    height 1.44rem
    background $elSilver
    overflow hidden
    border-radius .03rem
    img
      width 100%
      height 100%
      transition all .5s
  .r_info
    flex 1
    margin-left .15rem
    height 100%
    position relative
    left 0
    display flex
    flex-flow column nowrap
    .h1
      cursor pointer
      font-size .18rem
      color $lBlack
      font-weight 300
      position relative
      transition left .3s ease
      left 0
    .desc
      flex 1
      margin-top .1rem
      transition all .3s ease
      color $elBlack
      cursor pointer
    .bottom
      flex 0 0 .2rem
      height .2rem
      line-height .2rem
      display flex
      flex-flow row nowrap
      align-items center
      .icon
        opacity .6
        width .16rem
        height .16rem
      span
        margin 0 .14rem 0 .03rem
        transition color .3s ease
        color $elBlack
</style>
